<template>
	<view>
		<!--关联信息-->
		<view class="btName">关联信息</view>
		<view class="flex-white-plr26 ptb20 mt32 bdb_f5" @click="selectKehuFun">
			<text class="mr26">关联客户
				<text class="redXingh">*</text>
			</text>
			<view :class="customer_name ? '' : 'cBlack'">
				{{customer_name ? customer_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="selectLxrFun">
			<text class="mr26">联系人</text>
			<view :class="linkman_name ? '' : 'cBlack'">
				{{linkman_name ? linkman_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view @click="pickerSelectFun('单据类型')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">单据类型</text>
			<view :class="bus_type_name ? '' : 'cBlack'">
				{{bus_type_name ? bus_type_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="glOrderFun">
			<text class="mr26">关联单据</text>
			<view :class="bus_name ? '' : 'cBlack'">
				{{bus_name ? bus_name : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<!--基础信息-->
		<view class="btName">基础信息</view>
		<view class="flex-white-plr26-column ptb20 mt32 bdb_f5">
			<view style="margin-bottom: 8rpx;">
				<text>跟进内容</text>
				<text class="redXingh">*</text>
			</view>
			<u-input v-model="link_body" type="textarea" :border="true" :height="100" :auto-height="true" />
		</view>

		<view @click="pickerSelectFun('跟进方式')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">跟进方式
				<text class="redXingh">*</text>
			</text>
			<view :class="salemode ? '' : 'cBlack'">
				{{salemode ? salemode : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view>
		<view @click="pickerSelectFun('当前阶段')" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">当前阶段
				<text class="redXingh">*</text>
			</text>
			<view  :class="salestage ? '' : 'cBlack'">
				{{salestage ? salestage : '请选择'}}
				<u-icon class="ml26" name="arrow-right" size="40" color="#888888"></u-icon>
			</view>
		</view> 
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="DateShow = true, gjDateType = 'gjDate'">
			<text class="mr26">跟进时间</text>
			<view class="w420">{{$u.timeFormat(link_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
			<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5" @click="DateShow = true, gjDateType = 'next_time'">
			<text class="mr26">下次跟进</text>
			<view class="w420">
				<text v-if="next_time">{{$u.timeFormat(next_time, 'yyyy-mm-dd hh:MM:ss')}}</text>
				<text class="cBlack" v-else>请选择下次跟进时间</text>
			</view>
			<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
		</view>
		<!--相关资料-->
		<!-- <view class="flex-white-plr26-column ptb20 mt32">
			<view style="margin-bottom: 8rpx;">相关图片</view>
			<u-upload @on-list-change="imgFillUploadChangeFun" :action="action" :file-list="fileList" :max-size="5 * 1024 * 1024" max-count="9" :auto-upload="false"></u-upload>
		</view>
		<view class="flex-white-plr26-column ptb20 mt32">
			<view style="margin-bottom: 8rpx;">相关文件</view>
			<u-upload @on-list-change="imgFillUploadChangeFun" :action="action" :file-list="fileList" :max-size="5 * 1024 * 1024" max-count="9" :auto-upload="false"></u-upload>
		</view> -->
		<!--提交按钮-->
		<view class="submitView">
			<u-button type="primary" class="submitBtn" :ripple="true" ripple-bg-color="#909399" @click="submitBtnFun">
				{{pageType ? '保存' : '提交'}}</u-button>
		</view>
		<!--组件-->
		<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>
		<u-picker :params="pickerTimeParams" :safe-area-inset-bottom="true" end-year="2100" v-model="DateShow"
			@confirm="pickerTimeConfirmFun" :default-time="defaulTime" mode="time"></u-picker>
	</view>
</template>

<script>
	let that = '';
	import {
		getNowDate,formatDate
	} from '@/utils/date.js'
	import {
		apiCstDict,
		apiTrace
	} from '@/api/crm.js'
	export default {
		data() {
			return {
				selectShow: false,
				selectList: [],
				selectType: '',
				DateShow: false,
				pickerTimeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					timestamp: true
				},
				customer_name: '',
				customer_id: '',
				linkman_name: '',
				linkman_id: '',
				link_body: '',
				salemode: '外出拜访',
				salestage: '有需求跟进',
				gjDateType: '',
				link_time: '',
				next_time: '',
				bus_type:'',
				bus_type_name: '',
				bus_id:'',
				bus_name: '',
				sal_order_id: '',
				action: 'http://www.example.com/upload',
				fileList: [],
				pageType: '',
				xgInfoObj: {},
				defaulTime: '',
				cstDict:''//所有字典
			}
		},
		onLoad(e) {
			that = this;
			let dateObj = getNowDate(true);
			that.defaulTime = dateObj.nowDate;
			that.link_time = dateObj.st;
			console.log(e)
			// '&linkman_name=' + that.infoObj.lxr_name + '&linkman_id=' + that.infoObj._id
			if (e.customer_name && e.customer_name != 'undefined') {
				that.customer_name = e.customer_name;
			}
			if (e.customer_id && e.customer_name != 'undefined') {
				that.customer_id = e.customer_id;
			}
			if (e.linkman_name) {
				that.linkman_name = e.linkman_name;
			}
			if (e.linkman_id) {
				that.linkman_id = e.linkman_id;
			}
			if (e.bus_id) {
				that.bus_id = e.bus_id;
			}
			if (e.bus_name) {
				that.bus_name = e.bus_name;
			}
			if (e.bus_type) {
				that.bus_type = e.bus_type;
			}
			
			if (e.bus_type_name) {
				that.bus_type_name = e.bus_type_name;
			}
					
			if (e.type == 'update') {
				that.setDataFun();
				that.pageType = 'update';
				uni.setNavigationBarTitle({
					title: '修改跟进信息'
				})
			}
			
			//载入字典
			let reqData = {
				action: 'get_list',
				params: {
					
				}
			}
			apiCstDict(reqData)
				.then(res => {
					let dictArr = res.data;
					let newArr=[];
					for(var key in dictArr){
						let rowData=[];
						for (var i = 0; i < dictArr[key].length; i++) {
							rowData.push({
								label: dictArr[key][i].name,
								value:dictArr[key][i].id
							})
						}
						newArr[key]=rowData;
					}
					that.cstDict=newArr;
				});
			
			uni.$on('gjKehuBindFun', that.gjKehuBindFun)
			uni.$on('gjLxrBindFun', that.gjLxrBindFun)
			uni.$on('gjOrderBindFun', that.gjOrderBindFun)
		},
		onBackPress() {
			uni.$off('gjKehuBindFun', that.gjKehuBindFun)
			uni.$off('gjLxrBindFun', that.gjLxrBindFun)
			uni.$off('gjOrderBindFun', that.gjOrderBindFun)
		},
		methods: {
			// 选择定位地点
			chooseAddrFun: function() {
				uni.chooseLocation({
					success: function(res) {
						that.gjAddr = res.address;
					}
				});
			},
			// 展示相应数据选择框
			pickerSelectFun: function(str) {
				if (str == '跟进方式') {
					that.selectList = that.cstDict.salemode
				} else if (str == '当前阶段') {
					that.selectList = that.cstDict.salestage
				} else if (str == '单据类型') {
					that.selectList = [
						{
							value: 'cst_chance',
							label: '商机'
						},
						{
							value: 'cst_quoted',
							label: '报价单'
						},
						{
							value: 'sal_contract',
							label: '销售合同'
						},
						{
							value: 'fin_invoice_pay',
							label: '开票'
						},
						{
							value: 'fin_rece_record',
							label: '回款单'
						}
					]
				}
				that.selectShow = true;
				that.selectType = str;
			},
			// 选择框选中事件
			selectConfirmFun: function(e) {
				if (that.selectType == '跟进方式') {
					
					that.type = e[0].label;
					
				} else if (that.selectType == '跟进状态') {
					
					that.salestage = e[0].label;
					
				} else if (that.selectType == '单据类型') {
					
					//选择的类型和之前不一样
					if(that.bus_type!=e[0].value){
						that.bus_id='';
						that.bus_name='';
					}
					that.bus_type = e[0].value;
					that.bus_type_name = e[0].label;
					
				}
			},
			// 时间选择器点击确定按钮，返回当前选择的值
			pickerTimeConfirmFun: function(e) {
				let gjTime = parseInt(e.timestamp + '000');
				let dateTime = new Date().getTime();
				if (that.gjDateType == 'gjDate') {
					if (gjTime > dateTime) {
						uni.$myModalFun('新建跟进记录的跟进时间，不能大于当前时间，请修改！')
						return
					}
					that.link_time = gjTime;
				} else {
					if (gjTime < dateTime) {
						uni.$myModalFun('下次跟进记录的跟进时间，不能小于当前时间，请修改！')
						return
					}
					that.next_time = gjTime;
				}
			},
			// 当内部文件列表被加入文件、移除文件，或手动调用clear方法时触发
			imgFillUploadChangeFun: function(e) {
				console.log(e)
			},
			// 提交按钮方法
			submitBtnFun: function() {
				if (that.link_body == '') {
					uni.$myModalFun('跟进内容不能为空，请输入！')
					return
				}
				if (that.customer_name == '') {
					uni.$myModalFun('关联客户不能为空，请选择！')
					return
				}
				if (that.next_time == '') {
					uni.$myModalFun('下次联系时间不能为空，请输入！')
					return
				}
				let reqObj = {
					req: {
						link_body: that.link_body,
						link_time: formatDate(that.link_time),
						next_time: formatDate(that.next_time),
						customer_name: that.customer_name,
						customer_id: that.customer_id,
						linkman_name: that.linkman_name,
						linkman_id: that.linkman_id,
						salemode: that.salemode,
						salestage: that.salestage,
						bus_id:that.bus_id,
						bus_name:that.bus_name,
						bus_type:that.bus_type,
						bus_type_name:that.bus_type_name,
						create_user_id: uni.$userInfo.id
					}
				}
				
				let action = 'add';
				if (that.pageType == 'update') {
					action = 'update'
					reqObj.req.id = that.xgInfoObj.id;
					uni.showLoading({
						title: '修改中...'
					})
				} else {
					uni.showLoading({
						title: '提交中...'
					})
				}
				let reqData = {
					action: action,
					params: reqObj
				}
				apiTrace(reqData)
					.then(res => {
						if (action == 'update') {
							uni.showToast({
								title: '修改成功！',
								icon: 'none',
								duration: 888,
								mask: true
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 888)
						} else {
							uni.showToast({
								title: '新增成功！',
								icon: 'none',
								duration: 888,
								mask: true
							})
							reqObj.req.customer_name = that.customer_name;
							uni.$emit('addGjItemInListFun')
							setTimeout(() => {
								uni.redirectTo({
									url: './detail?index=0&id=' + res.data
								})
							}, 888)
						}
					})
			},
			// 选择所属客户
			selectKehuFun: function() {
				uni.navigateTo({
					url: '../cst_customer/show?type=add_trace_goback'
				})
			},
			// 绑定客户
			gjKehuBindFun: function(e) {
				//当选择的客户和上次不一至时要清除关联信息
				if (that.customer_id != '' && that.customer_id != e.customer_id) {
					that.linkman_name = '';
					that.linkman_id = '';
					that.bus_id = '';
					that.bus_name = '';
					that.bus_type = '';
					that.bus_type_name = '';
				}
				console.log(e);
				that.customer_id = e.customer_id;
				that.customer_name = e.customer_name;
			},
			// 选择客户联系人
			selectLxrFun: function() {
				if (!that.customer_id) {
					uni.$myModalFun('请先关联相关客户！')
					return
				}
				uni.navigateTo({
					url: '../cst_linkman/show?type=add_trace_goback&customer_id=' + that.customer_id
				})
			},
			// 绑定联系人
			gjLxrBindFun: function(e) {
				console.log(e)
				that.linkman_id = e.linkman_id;
				that.linkman_name = e.linkman_name;
			},
			// 关联单据方法
			glOrderFun: function() {
				if (!that.customer_id) {
					uni.$myModalFun('请先关联相关客户！')
					return
				}
				if (!that.bus_type) {
					uni.$myModalFun('请先选择关联单据类型！')
					return
				}
				if (that.bus_type == 'cst_chance') {
					uni.navigateTo({
						url: '../cst_chance/show?type=genjin&customer_id=' + that.customer_id
					})
				} else if (that.bus_type == 'cst_quoted') {
					uni.navigateTo({
						url: '../cst_quoted/show?type=genjin&customer_id=' + that.customer_id
					})
				} else if (that.bus_type == 'sal_contract') {
					uni.navigateTo({
						url: '../sal_contract/show?type=genjin&customer_id=' + that.customer_id
					})
				} else if (that.bus_type == 'fin_invoice_pay') {
					uni.navigateTo({
						url: '../fin_invoice_pay/show?type=genjin&customer_id=' + that.customer_id
					})
				} else if (that.bus_type == 'fin_rece_plan') {
					uni.navigateTo({
						url: '../fin_rece_plan/show?type=genjin&customer_id=' + that.customer_id
					})
				} else if (that.bus_type == 'fin_rece_record') {
					uni.navigateTo({
						url: '../fin_rece_record/show?type=genjin&customer_id=' + that.customer_id
					})
				} else if (that.bus_type == '退货退款') {
					uni.navigateTo({
						url: '../shangji/shangji?type=genjin&customer_id=' + that.customer_id
					})
				}
			},
			// 关联单据
			gjOrderBindFun: function(e) {
				that.bus_id = e.id;
				console.log(e);
				if (that.bus_type == 'cst_chance') {
					that.bus_name = e.name;
				} else if (that.bus_type == 'cst_quoted') {
					that.bus_name = e.name;
				} else if (that.bus_type == 'sal_contract') {
					that.bus_name = e.name;
				} else if (that.bus_type == 'fin_invoice_pay') {
					that.glOrder = e.fpCode;
				} else if (that.bus_type == 'fine_rece_record') {
					that.glOrder = e.hkjhCode;
				} else if (that.bus_type == '回款单') {
					that.bus_name = e.name;
				} else if (that.bus_type == '退货退款') {
					that.glOrder = e.ttCode;
				}
			},
			// 给修改信息赋值
			setDataFun: function() {
				that.xgInfoObj = uni.$infoObj
				let obj = uni.$infoObj
				that.link_body = obj.link_body
				that.salemode = obj.salemode
				that.salestage = obj.salestage
				that.link_time = obj.link_time
				that.next_time = obj.next_time
				that.customer_name = obj.customer_name
				that.customer_id = obj.customer_id
				that.linkman_name = obj.linkman_name
				that.linkman_id = obj.linkman_id
				that.bus_id = obj.bus_id
				that.bus_name = obj.bus_info.name
				that.bus_type = obj.bus_type
				that.bus_type_name = obj.bus_info.type
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
		padding-bottom: 260rpx;
	}

	.u-radio {
		width: 200rpx !important;
	}
</style>
